<template>
    <!-- 流水 -->
    <div class="admin2-list">
        <div style="padding: 10px;">
        </div>
        
        <div style="width: 70vw;">
            <el-descriptions
                title="交易流水"
                direction="vertical"
                :column="8"
                border
            >
                <view v-for="item,index in beginList" :key="index">
                    <view  v-if="index==0">
                        <el-descriptions-item label="商品编号">{{ item.goodsId }}</el-descriptions-item>
                        <el-descriptions-item label="卖家编号">{{ item.sellerOpenId }}</el-descriptions-item>
                        <el-descriptions-item label="买家编号">{{ item.buyerOpenId }}</el-descriptions-item>
                        <el-descriptions-item label="商品价格">{{ item.money }}</el-descriptions-item>
                        <el-descriptions-item label="卖家收益">{{ item.sellMoney }}</el-descriptions-item>
                        <el-descriptions-item label="平台收益">{{ item.commission }}</el-descriptions-item>
                        <el-descriptions-item label="买家编号">{{ item.buyerOpenId }}</el-descriptions-item>
                        <el-descriptions-item label="流水时间">{{ item.createTime }}</el-descriptions-item>
                    </view>
                    <view v-else>
                        <el-descriptions-item >{{ item.goodsId }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.sellerOpenId }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.buyerOpenId }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.money }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.sellMoney }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.commission }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.buyerOpenId }}</el-descriptions-item>
                        <el-descriptions-item >{{ item.createTime }}</el-descriptions-item>
                    </view>
                </view>
            </el-descriptions>
        </div>
        <!-- 分页 -->
        <div>
            <el-pagination background
             layout="prev, pager, next" 
             :total="Math.ceil(total/5)*10"
             :current-page="current"
             @current-change="currentPage"
             />
        </div>

    </div>
</template>
<script>
import merchandiseManagement from '@/api/MerchandiseManagement';
import flowApi from '@/api/flowApi';

export default{
    data(){
        return{
            upFlag:false,
            dialogVisible:false,
            beginList:[],
            current:0,
            hasNext: false,
            hasPrevious:true,
            size:0,
            total:0,
            upData:{
                id:0,
                position:'',
                regionDescribe:''
            }
        }
    },
    methods:{
        del(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                merchandiseManagement.del(
                    id
                ).then(res=>{
                    if(res.code==200){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.initPage(this.current,5)
                    }else{
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    }
                }) 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },

        // 当前页面
        currentPage(newPage){
            this.current = newPage;
            this.initPage(this.current,5)
        },
        // 初始化
        initPage(pageNum,pageSize){
            flowApi.getList({
                "pageNum": pageNum,
                "pageSize": pageSize
            }).then((res)=>{
                console.log(res)
                this.beginList = res.data.records;
                this.current = res.data.current;
                this.hasNext = res.data.hasNext;
                this.hasPrevious = res.data.hasPrevious;
                this.size = res.data.size;
                this.total = res.data.total;
          })
        },
    },
    mounted() {
        this.initPage(1,5);
    }

}

</script>
<style lang="scss">
.admin2-list{
    form {
        max-width: 500px;
        margin: 50px auto;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    div {
        margin-bottom: 15px;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input[type="file"],
    input[type="text"],
    input[type="password"],
    input[type="email"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type="file"]:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    }
</style>